<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文档管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改文档</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="documentform" :rules="rules" label-width="100px" size="mini" class="demo-ruleForm" :model="documentform">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="文档标题:" prop="title">
              <el-input v-model="documentform.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" >
          <el-col :span="6" >
            <el-form-item label="文档描述:" prop="remark">
              <el-input type="textarea" v-model="documentform.remark" :style="{width:'300px',height:'250px'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" size="small" @click="uploadDocument (documentform)">提交</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button size="small" @click="resetForm('documentform')">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button size="small" @click="goBack">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getDocument();
  },
  data(){
    return {
      documentform: {
        title: '',
        remark: '',
        id: this.$route.query.documentid
      },
      rules: {
        title: [
          { required: true, message: '请输入文档标题', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入文档描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goBack(){
      history.back(-1);
    },
    async uploadDocument(){
      const {data:res} =await  this.$http.put('/document/update',this.documentform);
      console.log(res);
      if(res.code===200){
        this.$message.success(res.message);
        this.goBack();
      }else {
        this.$message.error(res.message);
      }
    },
    async getDocument(){
      const {data:res} =await  this.$http.get(`/document/show/${this.$route.query.documentid}`);

      if(res.code===200){
        this.documentform=res.data;
      }else {
        this.$message.error(res.message);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style>
#input-file{
  border: none !important;
}
.el-textarea .el-textarea__inner{
  height: 250px;
}
</style>